<template>
  <div class="app-container">
    <header-search class="g-w100 g-h100 colon mainSearchPanel">
      <el-row>
        <el-col :span="24" style="text-align: left">
          <p class="page-header-title">
            <i class="el-icon-right"></i>
            {{ title }}
          </p>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-form ref="queryForm" :inline="true">
        <el-form-item label="发布日期">
          <el-date-picker type="daterange" v-model="queryParams.fbrq" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="onQueryParamChange_fbrq"> </el-date-picker>
        </el-form-item>
        <el-form-item label="井号">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.jh" style="width: 300px"
            @change="onQueryParamChange_jh">
            <el-option v-for="({ sjxdm, sjxmc }) in selectorData_jh" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报告名称">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.bgmc" style="width: 300px">
            <el-option v-for="({ sjxdm, sjxmc }) in selectorData_bgmc" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="buttonArea">
          <el-button type="primary" icon="el-icon-search" @click="getListData"> 查询 </el-button>
          <el-button icon="el-icon-refresh" class="commonBtn" @click="resetQuery"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </header-search>

    <page-panel-new class="mainListPanel" :header-title="title">
      <el-row class="mbBottom">
        <el-col :span="24" style="text-align: right">
          <el-button type="primary" @click="doExportExcel"> 导出报告清单 </el-button>
        </el-col>
      </el-row>
      <el-table ref="table-main" :data="data" height="calc(100% - 113px)">
        <el-table-column label="序号" align="right" prop="id" width="50">
          <template slot-scope="scope">
            {{ scope.$index + (queryParams.pageSize * (queryParams.pageNum - 1)) + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="送样单位" align="left" prop="songydw" width="300" show-overflow-tooltip />
        <el-table-column label="地区" align="left" prop="dq" minWidth="100" show-overflow-tooltip />
        <el-table-column label="井号" align="left" prop="jh" width="150" show-overflow-tooltip />
        <el-table-column label="采样层位" align="left" prop="cycw" width="100" show-overflow-tooltip />
        <el-table-column label="采样井段" align="left" prop="cyjd" width="150" show-overflow-tooltip />
        <el-table-column label="样品数量" align="left" prop="ypsl" width="100" show-overflow-tooltip />
        <el-table-column label="报告名称" align="left" prop="bgmc" width="250" show-overflow-tooltip />
        <el-table-column label="报告编号" align="left" prop="bgbh" width="200" show-overflow-tooltip />
        <el-table-column label="样品编号" align="left" prop="ypbh" width="200" show-overflow-tooltip />
        <el-table-column label="送样人" align="center" prop="songyr" width="100" show-overflow-tooltip />
        <el-table-column label="送样日期" align="center" prop="songyrq" width="100" show-overflow-tooltip />
        <el-table-column label="送样编号" align="center" prop="songybh" width="200" show-overflow-tooltip />
        <el-table-column label="签发人" align="center" prop="zsr_xm" width="100" show-overflow-tooltip />
        <el-table-column label="签发日期" align="center" prop="zsrqmsj" width="100" show-overflow-tooltip />
        <el-table-column label="发布日期" align="center" prop="bgfbsj" width="100" show-overflow-tooltip />
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="doViewFJ(scope.row, scope.$index)"> 报告接收 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="pagination.total" class="mainListPagination" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getListData" />


    </page-panel-new>


    <el-dialog title="报告接收" :visible.sync="OpType.OpenFJ" width="600px" append-to-body>
      <div class="el-dialog-div">
        <el-form ref="form-fj" label-width="100px">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="报告及附件" prop="displafile_fj">
                <ul>
                  <li v-for="(file, idx) in upload.uploadFiles" :key="idx">
                    <span
                      @click.stop="doDownloadFile(file.classid, file.fileid, file.name, file.bgmc, file.fxph, file.ypbh)">
                      <el-link href="#" type="primary">{{ file.name }}</el-link>
                    </span>
                  </li>
                </ul>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelBtn" @click="doCloseFJ"> 关 闭 </el-button>
      </div>
    </el-dialog>

  </div>

</template>
<script lang="ts">
import Vue from 'vue'
import Trend from '@/components/mainEntrance/trend/index.vue'
import { prefix } from '@/config/global'
import {
  getListData,
  getSelectorData_jh,
  getSelectorData_bgmc,
  getListData_bgfj,
  exportExcel,
  downloadFile,
  submit_sfyxz,
} from '@/api/syfxxtApi/khfw/wcbgjs/wjsbg/api.js'
import {
  CONTRACT_STATUS,
  CONTRACT_STATUS_OPTIONS,
  CONTRACT_TYPES,
  CONTRACT_PAYMENT_TYPES,
} from '@/constants'
import dayjs from 'dayjs'

const FORM_INITIALDATA = { //录入Form初始化数据
  __rowindex: '',
  optype: '',
  id: '',
  xzyhm: '',
  khdw: '',
  ypbh: '',
  syph: '',
  fxph: '',
  sysbh: '',
  bgbh: '',
  dq: '',
  jh: '',
  cycw: '',
  cyjd: '',
  ssbm: '',
  bgmc: '',
  songydw: '',
  songyr: '',
  songybh: '',
  songyrq: '',
  ypsl: '',
  yphgsl: '',
  zsr: '',
  zsr_xm: '',
  zsrqmsj: '',
  bgfbsj: '',
  bgid: '',
  bz: '',
  bgsfyxz: '',
  bgxzsj: '',
};

const QUERY_PARAMS_INITIALDATA = { //查询参数初始化数据
  pageNum: 1,
  pageSize: 20,
  fbrq: [dayjs().subtract(1, 'month').subtract(6, 'month').format('YYYY-MM-DD'),
  dayjs().subtract(1, 'day').format('YYYY-MM-DD')],
  jh: '',
  bgmc: '',
};


export default Vue.extend({
  name: 'Khfw-wcbgjs-wjsbg',
  data() {
    return {
      title: '未接收报告',
      dialogTitle: '',
      thCss: 'custom-th-class',
      CONTRACT_STATUS,
      CONTRACT_STATUS_OPTIONS,
      CONTRACT_TYPES,
      CONTRACT_PAYMENT_TYPES,
      prefix,
      dataLoading: false,
      data: [], //主表格数据
      selectorData_jh: [],//查询选择器 井号 下拉数据
      selectorData_bgmc: [], //查询选择器 报告名称 下拉数据
      OpType: {
        Open: false,
        Delete: false,
        OpenFJ: false,
        Export: false,
      },
      selectedRowKeys: [],
      value: 'first',
      formData: { ...FORM_INITIALDATA }, //录入Form数据
      formDisable: false,
      showPlaceHolder: true,
      queryParams: { ...QUERY_PARAMS_INITIALDATA }, //查询参数
      rules: { //录入验证规则

      },
      rowKey: 'id',
      tableLayout: 'fixed',
      verticalAlign: 'top',
      hover: true,
      pagination: { //翻页配置
        defaultPageSize: 20,
        total: 0,
        defaultCurrent: 1,
      },
      upload: {  //上传配置
        uploadVisible: false, //上传项是否显示，在查看时不显示
        uploadFiles: [], //已上传文件列表
        bgsfyxz: null,
      },
      exportVisible: false,
    }
  },
  computed: {
  },
  mounted() {
    this.getSelectorData_jh();
    this.getSelectorData_bgmc();
    this.getListData();
  },
  methods: {

    //获取主表格查询数据
    getListData() {
      try {
        this.dataLoading = true
        const param = {
          start: (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
          limit: this.queryParams.pageSize,
          sel_qsrq: dayjs(this.queryParams.fbrq[0]).format('YYYY-MM-DD'),
          sel_jzrq: dayjs(this.queryParams.fbrq[1]).format('YYYY-MM-DD'),
          sel_jh: this.queryParams.jh,
          sel_bgmc: this.queryParams.bgmc,
        };

        if (param.sel_qsrq == null || param.sel_jzrq == null) {
          this.$message.error({ content: '请选择查询日期!', placement: 'center' });
          return;
        }
        getListData(param).then((res) => {
          if (res.success) {
            this.data = res.rows;
            this.pagination.total = res.total;
            this.exportDisabled = this.data.length == 0;
            this.queryParams.commitedParam = param;
          } else {
            this.data = []
            this.$message.error({ content: '请重新搜索!', placement: 'center' })
          }
        })
      } catch (error) {
        this.dataLoading = false;
        console.warn('接口提示', error);
      }
    },
    //获取 井号选择器数据
    getSelectorData_jh() {
      try {
        const param = {
          p_qsrq: dayjs(this.queryParams.fbrq[0]).format('YYYY-MM-DD'),
          p_jzrq: dayjs(this.queryParams.fbrq[1]).format('YYYY-MM-DD'),
        };
        getSelectorData_jh(param).then((res) => {
          if (res.success) {
            this.selectorData_jh = res.rows;
          } else {
            this.selectorData_jh = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取报告名称选择器数据
    getSelectorData_bgmc() {
      try {
        const param = {
          p_qsrq: dayjs(this.queryParams.fbrq[0]).format('YYYY-MM-DD'),
          p_jzrq: dayjs(this.queryParams.fbrq[1]).format('YYYY-MM-DD'),
          p_jh: this.queryParams.jh,
        };
        getSelectorData_bgmc(param).then((res) => {
          if (res.success) {
            this.selectorData_bgmc = res.rows;
          } else {
            this.selectorData_bgmc = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },

    //处理新增按钮事件
    doAdd() {
    },
    //处理修改按钮事件
    doUpdate(row, rowindex) {

    },
    //处理删除按钮事件
    doDelete(row, rowindex) {
    },
    //处理查看按钮事件
    doView(row, rowindex) {
    },
    //处理报告接收按钮事件
    doViewFJ(row, rowindex) {
      this.$refs['table-main'].setCurrentRow(row);
      this.formData = { ...row };
      const param = {
        start: 0,
        limit: 100,
        sel_fxph: row.fxph,
        sel_ypbh: row.ypbh,
        sel_bgmc: row.bgmc,
      };
      getListData_bgfj(param).then((res) => {
        if (res.success) {
          this.upload.uploadFiles = res.rows;
          this.upload.uploadFiles.forEach(file => {
            file.name = file.filename;
            file.status = 'success';
          });
          if (this.upload.uploadFiles.length > 0) {
            this.OpType.OpenFJ = true;
            this.upload.bgsfyxz = null;
          } else {
            this.$message.info({ content: '无报告!', placement: 'center' })
          }

        } else {
          this.$message.error({ content: '操作失败!', placement: 'center' })
        }
      });
    },
    //处理导出按钮事件
    doExportExcel() {
      try {
        if (!this.queryParams.commitedParam) {
          this.$message.info({ content: '请先查询数据!', placement: 'center' })
        }
        const filename = this.title + '-' + dayjs().format('YYYYMMDDHHmmssSSS') + '.xls';
        exportExcel(this.download, this.queryParams.commitedParam, filename);
      } catch (error) {
      }
    },
    //处理下载附件按钮事件
    doDownloadFile(classid, fileid, filename, bgmc, fxph, ypbh) {
      try {
        const param = {
          classid,
          fileid,
        };
        downloadFile(this.download, param, filename).then((res) => {
          const param_sfyxz = {
            bgmc: bgmc,
            ph: fxph,
            ypbh: ypbh,
            lb: classid === '1' ? '报告' : '附件',
          }
          submit_sfyxz(param_sfyxz)
            .then((res) => {
              if (res.success) {
                if (classid === '1') {
                  this.upload.bgsfyxz = '是';
                }
              }
            })
        });
      } catch (error) {
      }
    },
    //处理保存按钮事件
    doSubmit() {
    },
    //处理关闭事件
    doClose() {
      this.OpType.Open = false;
    },
    //处理查看附件按钮关闭事件
    doCloseFJ() {
      this.OpType.OpenFJ = false;
      if (this.upload.bgsfyxz == '是') {
        this.getListData();
      }
    },
    //查询参数重置按钮事件
    resetQuery() {
      this.queryParams = { ...QUERY_PARAMS_INITIALDATA };
      this.getSelectorData_jh();
      this.getSelectorData_bgmc();
    },
    //翻页事件
    handlePageChange(pageInfo) {
      this.getListData()
      // this.pagination.defaultCurrent = pageInfo.current;
    },
    //查询参数改变事件
    onQueryParamChange_fbrq(val) {
      this.queryParams.jh = '';
      this.queryParams.bgmc = '';
      this.getSelectorData_jh();
      this.getSelectorData_bgmc();
    },
    //查询参数改变事件
    onQueryParamChange_jh(val) {
      this.queryParams.bgmc = '';
      this.getSelectorData_bgmc();
    },
    //录入Select下拉列表显示改变事件
    handleSelectVisibleChange(e, r) {
      this.$refs['form-main'].validateField(r);
    },
    //录入Select清除事件
    handleSelectClear(r) {
      this.$refs['form-main'].validateField(r);
    },
    //上传文件改变事件
    handleUploadChange(file, filelist) {
      this.upload.uploadFiles = filelist;
    },
    //上传文件删除前事件
    handleUploadBeforeRemove(file, filelist) {
    },
    //上传文件删除事件
    handleUploadRemove(file, filelist) {
    },
    test() {
      alert(1);
    }

  },
})
</script>
<style lang="less" scoped>
.higc {
  height: 100%;
  overflow-y: auto;
  padding: 5px;
}

.app-container {
  height: 100%;

  // .el-table {
  //   overflow: scroll;
  // }
}

::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}

/deep/ .is-left>div {
  text-align: left;
}

/deep/ .is-right>div {
  text-align: right;
}

/deep/ .is-left>div {
  text-align: left;
}

/deep/ .is-center>div {
  text-align: center;
}

::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-textarea__inner,
::v-deep .el-radio.is-disabled .el-radio__inner,
::v-deep .el-radio.is-disabled .el-radio__label,
::v-deep .el-checkbox.is-disabled .el-checkbox__inner,
::v-deep .el-checkbox.is-disabled .el-checkbox__label {
  background-color: #f6f6f6 !important;
  /* 示例：改变背景颜色 */
  color: #333 !important;
  /* 示例：改变文字颜色 */
}

::v-deep .el-upload.el-upload--text {
  margin: 0 !important;
}

.mainSearchPanel .page-header-title {
  font-size: 16px;
  color: #409EFF;
  font-weight: bolder;
  display: block;
  margin: 0;
  padding: 0;
  margin: 10px 0;
}

.mainSearchPanel .el-divider--horizontal {
  margin: 0 !important;
  margin-top: 10px;
}
</style>
